html {
	font-family: 'Microsoft YaHei',sans-serif;
}
body {
	margin: 0px;
	overflow: hidden;
}
a {
	background-color: transparent;
}
a:active, a:hover {
	outline: 0px none;
}
img {
	border: 0px none;
}
svg:not(:root) {
	overflow: hidden;
}
button, input, optgroup, select, textarea {
	color: inherit;
	font: inherit;
	margin: 0px;
}
button {
	overflow: visible;
}
button, select {
	text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0px none;
	padding: 0px;
}
table {
	border-collapse: collapse;
	border-spacing: 0px;
}
td, th {
	padding: 0px;
}


* {
	box-sizing: border-box;
}
html, body {
	width: 100%;
	height: 100%;
	font-size: 0.7vw;
}


.ui {
	z-index: 100;
	/*height: 33%;*/
	/*max-height: 340px;*/
}
.ui-content {
	opacity: 0.7;
	height: 100%;
}
.ui{
	overflow: hidden;
	position: absolute;
	bottom: 0%;
	right: 0%;
	width: 100%;
	font-family: "Oswald";
	font-weight: 300;
/*	opacity: 0.7;
	height: 100%;
	width: 100%;
	display: inline-block;*/
}
.ui .ui-content {
	width: 100%;
	display: inline-block;
}
.ui #ui-controls {
	width: 200px;
	height: 100%;
	margin-left: 10px;
	margin-right: 10px;
	float: right;
	display: inline-block;
}
#spinning-things {
	margin: auto;
	width: 160px;
}
.ui .module {
	float: left;
	height: 100%;
	width: 100%;
	margin-right: 1%;
	color: rgb(75, 255, 255);
	opacity: 1;
}
.ui .module:last-child {
	margin-right: 0%;
	margin-left: 1%;
}
.ui .title {
	position: relative;
	background-color: rgba(0, 206, 209, 0.1);
	height: 413x;
	font-family: "Oswald";
	font-weight: 300;
	padding: 10px 0px 10px 10px;
	font-size: 1vw;
	cursor: pointer;
}
.attack-table {
	/*height: calc(100% - 51px);*/
}
.attack-table tbody {
	/*height: 100%;*/

}
.attack-table tr {
	/*display: block;*/
	line-height: 15px;
	height: 20px;
	/*font-size: 2px;*/
}
span {
	display: block;
}
table {
	width: 98%;
	table-layout: fixed;
	margin-left: 1%;
	margin-top: 1%;
}
.row {
	cursor: pointer;
}
.header {
	text-transform: uppercase;
	font-family: "Oswald";
	font-weight: 700;
}
.column-header, .row {
	padding-left: 0.1%;
}
.cell {
	font-family: "Open Sans";
	font-weight: 300;
}
.cell span {
	display: inline;
}
td {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.1vw;
}
.number {
	font-family: "Oswald";
	font-weight: 400;
}
.team-logo {
	width: 18px;
	height: 18px;
	padding-left: 1%;
}


.ui-datatable-events{
	width:35%;
	left: 0;
	bottom:10px;
	/*background-color: rgba(0, 0, 255, 0.5);*/
	color: #444;
	-webkit-font-smoothing: antialiased;
	background: #000222;
	background: -moz-linear-gradient(top,  #000222 0%, #4b637c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c));
	background: -webkit-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -o-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -ms-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: linear-gradient(top,  #000222 0%,#4b637c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 );
}

.ui-datatable-source{
	width: 16%;
	/*height: 40%;*/
	max-height: 70%;
	top:0px;
	left: 0;
	/*background-color: rgba(0, 0, 255, 0.5);*/
	color: #444;
	-webkit-font-smoothing: antialiased;
	background: #000222;
	background: -moz-linear-gradient(top,  #000222 0%, #4b637c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c));
	background: -webkit-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -o-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -ms-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: linear-gradient(top,  #000222 0%,#4b637c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 );
}

.ui-datatable-target{
	width: 16%;
	/*height: 40%;*/
	max-height: 70%;
	top:60px;
	right: 0;
	/*background-color: rgba(0, 0, 255, 0.5);*/
	/*background: #fff;*/
	color: #444;
	-webkit-font-smoothing: antialiased;
	background: #000222;
	background: -moz-linear-gradient(top,  #000222 0%, #4b637c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c));
	background: -webkit-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -o-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -ms-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: linear-gradient(top,  #000222 0%,#4b637c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 );
}

.ui-datatable-service{
	width: 30%;
	right: 0;
	bottom:10px;
	/*background-color: rgba(0, 0, 255, 0.5);*/
	color: #444;
	-webkit-font-smoothing: antialiased;
	background: #000222;
	background: -moz-linear-gradient(top,  #000222 0%, #4b637c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c));
	background: -webkit-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -o-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: -ms-linear-gradient(top,  #000222 0%,#4b637c 100%);
	background: linear-gradient(top,  #000222 0%,#4b637c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 );
}

.logo{
	position: absolute;
	z-index: 100;
}
.logo h3{
	font-family: "Microsoft YaHei",sans-serif;
	margin:0;
	font-size: 50px;
	color:#fff;
}

.ui-round{
	position: absolute;
	z-index: 100;
	left: 45%;
	margin-left: -72px;
}
.ui-round h3{
	font-family: "Microsoft YaHei",sans-serif;
	margin:0;
	font-size: 36px;
	color:#fff;
	display: inline;
}

.button {
	float:right;
	display: inline-block;
	position: relative;
	margin-right: 10px;
	padding: 0 px;
	text-align: center;
	text-decoration: none;
	font: bold 12px/25px Arial, sans-serif;

	border: 0;

	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;

	background-color: rgba(0, 0, 255, 0.7);
	cursor: pointer;
	color: #19667d;
	/*background: #70c9e3;*/
}

.row span.success{
	color: rgb(255, 165, 101);
}

.row span.failed{
	color: rgb(101, 255, 175);
}



canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%
	height: 100%;
	overflow: hidden;
}
#fps{
	position: absolute;
	top:65px !important;
	left:17% !important;
}


/*DAT GUI*/
.dg.ac select{
	color: #000;
}
.dg.ac .close-button{
	background: rgba(0, 0, 255, 0.8) !important;
	color: #eee !important;
}

.dg .cr .property-name {
    width: 50% !important; 
}

.dg .cr .c {
	width: 50% !important; 
}
.dg.a{
	margin-right: 0 !important;
}



.btn-play{
	/*background-size:100% 100%;*/
	background: url(../img/play.png) no-repeate !important;
}

.playContainer { position: relative; float: left; }
.playContainer li { list-style: none; position: relative; float: left; border: 16px solid #4b7b7c; color: #fff; height: 0; width:0; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; margin: 0 20px; }
.playContainer a { border-style: solid; text-indent: -9999px; position: absolute; top: -8px; left: -4px;  }
.playBtn,.stopBtn{
	cursor: pointer;
}
.playBtn a { border-color: transparent transparent transparent #4beaea; border-width: 8px 0 8px 12px;  width: 0; height: 0; }
.stopBtn a { border: 7px solid #4beaea; height: 0; width: 0; left: -7px; top: -7px;}

.controls{
	position: absolute;
	z-index: 1000;
	right: 240px;
	top: 10px;
}

.progressMask {
	position: absolute;
	z-index: 100000;
	width: 100%;
	height: 100%;
	background: #fff;
}

.progressMask .progress {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -16px;
	margin-left: -200px;
	width: 400px;
	height: 32px;
	background-color: #ddd;
}

.progressMask .progress .progressBar {
	margin: 0;
	padding: 0;
	border: 0;
	width: 0;
	height: 100%;
	background-color: #26C281;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
}